<template>
	<view class='t-toptips' :style="{top: top,background: cubgColor}" :class="[show?'t-top-show':'']">
		<view v-if="loading" class="flex flex-sub">
			<view class="cu-progress flex-sub round striped active sm">
				<view :style="{ background: color,width: value + '%'}"></view>
			</view>
			<text class="margin-left">{{value}}%</text>
		</view>
		<block v-else>{{msg}}</block>
	</view>
</template>

<script>
	export default {
		props: {
			top: {
				type: String,
				default: 'auto'
			},
			bgColor: {
				type: String,
				default: 'rgba(49, 126, 243, 0.5)',
			},
			color: {
				type: String,
				default: '#e54d42',
			}
		},
		data() {
			return {
				cubgColor: '',
				loading: false,
				value: 5,
				show: false,
				msg: '执行完毕~',
			}
		},
		methods: {
			toast(title = '', { duration = 2000, icon = 'none' } = {}) {
				uni.showToast({ title, duration, icon });
			},
			getRequest(url) {
				let theRequest = new Object();
				let index = url.indexOf("?");
				if (index != -1) {
					let str = url.substring(index + 1);
					let strs = str.split("&");
					for (let i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
					}
				}
				return theRequest;
			},
			/*
				上传说明：
				currentWebview: 当前窗口webview对象
				url：上传接口地址
				name：上传文件key值
				header: 上传接口请求头
				...：body内其他参数
			*/
			appChooseFile({ currentWebview, url, name = 'file', header, ...formData } = {}) {
				let wv = plus.webview.create("", "/hybrid/html/index.html", {
					'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
					top: 0,
					height: '100%',
					background: 'transparent'
				}, {
					url,
					header,
					formData,
					key: name,
				});
				wv.loadURL("/hybrid/html/index.html")
				currentWebview.append(wv);
				wv.overrideUrlLoading({ mode: 'reject' }, (e) => {
					let { fileName, id } = this.getRequest(e.url);
					fileName = unescape(fileName);
					id = unescape(id);
					return this.onCommit(
						this.$emit('up-success', { fileName, data: id })
					);
				});
			},
			/* 
			上传
			*/
			upload(param = {}) {
				if (!param.url) {
					this.toast('上传地址不正确');
					return;
				}
				if (this.loading) {
					this.toast('还有个文件玩命处理中，请稍候..');
					return;
				}
				return this.appChooseFile(param);
			},
			onCommit(resolve) {
				this.msg = '执行完毕~';
				this.loading = false;
				this.cubgColor = 'rgba(57, 181, 74, 0.5)';
				setTimeout(() => { this.show = false; }, 1500);
				return resolve;
			},
			setdefUI() {
				this.cubgColor = this.bgColor;
				this.value = 0;
				this.loading = true;
				this.show = true;
			},
			upErr(errText) {
				this.$emit('up-error', errText);
			},
			errorHandler(errText, reject) {
				this.msg = errText;
				this.loading = false;
				this.cubgColor = 'rgba(229, 77, 66, 0.5)';
				setTimeout(() => { this.show = false; }, 1500);
				return reject(errText);
			}
		}
	}
</script>

<style scoped>
	.t-toptips {
		width: 100%;
		padding: 18upx 30upx;
		box-sizing: border-box;
		position: fixed;
		z-index: 90;
		color: #fff;
		font-size: 30upx;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		word-break: break-all;
		opacity: 0;
		transform: translateZ(0) translateY(-100%);
		transition: all 0.3s ease-in-out;
	}

	.t-top-show {
		transform: translateZ(0) translateY(0);
		opacity: 1;
	}
</style>
